<!-- company表单弹窗 -->
<form id="title-form" lay-filter="title-form" class="layui-form model-form">
    <input name="titlid" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">称号名称</label>
        <div class="layui-input-block">
            <input name="ttname" placeholder="请输入称号名称" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">称号颜色</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="titclr" value="" placeholder="请选择颜色" class="layui-input" id="titclr">
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="color-form"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">获取方式</label>
        <div class="layui-input-block">
            <input name="aqdesc" placeholder="请输入获取方式" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">达成条件</label>
        <div class="layui-input-block">
            <input name="points" placeholder="请输入达成条件" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">称号类型</label>
        <div class="layui-input-block">
            <select name="tttype" id="tttype" lay-verify="required" lay-filter="type">
                <option value="-1"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="role" hidden="hidden">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
            <select name="roleid" id="roleid" lay-verify="required">
                <option value="-1"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
        <button class="layui-btn" lay-filter="title-form-submit" lay-submit>保存</button>
    </div>
</form>

<script>
    layui.use(['layer', 'admin', 'form', 'colorpicker'], function () {

        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;
        var colorpicker = layui.colorpicker;

        colorpicker.render({
            elem: '#color-form'
            ,color: '#1c97f5'
            ,done: function(color){
                $('#titclr').val(color);
            }
        });

        // 获取所有称号类型
        layer.load(2);
        admin.req('api-user/titleType/getSelectTitleTypes', {}, function (data) {
            layer.closeAll('loading');
            if (0 == data.code) {
                $.each(data.data,function(index,item){
                    $('#tttype').append(new Option(item.tpname,item.tttpid));//往下拉菜单里添加元素
                });
                form.render();  //菜单渲染 把内容加载进去
            } else {
                layer.msg('获取称号类型失败', {icon: 2, time: 500});
            }
        }, 'post');

        // 获取所有角色
        layer.load(2);
        admin.req('api-user/roles', {}, function (data) {
            layer.closeAll('loading');
            if (0 == data.code) {
                $.each(data.data,function(index,item){
                    $('#roleid').append(new Option(item.name,item.id));//往下拉菜单里添加元素
                });
                form.render();  //菜单渲染 把内容加载进去
            } else {
                layer.msg('获取称号类型失败', {icon: 2, time: 500});
            }
        }, 'get');

        // 选择角色专属后显示角色列表
        form.on('select(type)',function () {
            var type = $("select[name=tttype]").val();
            if (type == 1){
                $("#role").show();
            } else {
                $("select[name=roleid]").val(-1);//往下拉菜单里添加元素
                form.render();  //菜单渲染 把内容加载进去
                $("#role").hide();
            }
        });

        // 回显title数据
        // debugger;
        var title = admin.getTempData('title');
        if (title) {
            if (title.tttype == 1){
                $("#role").show();
            }
            form.val('title-form', title);
            colorpicker.render({
                elem: '#color-form'
                ,color: title.titclr
                ,done: function(color){
                    $('#titclr').val(color);
                }
            });
        }

        // 表单提交事件
        form.on('submit(title-form-submit)', function (data) {
            layer.load(2);
            // debugger;
            if (data.field.titlid != null && data.field.titlid != ''){

                admin.req('api-user/title/updateTitle', JSON.stringify(data.field), function (data) {
                    layer.closeAll('loading');
                    if (data.code == 0) {
                        layer.msg(data.msg, {icon: 1, time: 2000});
                        admin.finishPopupCenter();
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 2000});
                    }
                }, 'POST');
                return false;
            } else {
                admin.req('api-user/title/addTitle', JSON.stringify(data.field), function (data) {
                    layer.closeAll('loading');
                    if (data.code == 0) {
                        layer.msg(data.msg, {icon: 1, time: 2000});
                        admin.finishPopupCenter();
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 2000});
                    }
                }, 'POST');
                return false;
            }

        });
    });
</script>